<template>
  <div class='contentRoleADD'>
    <div class='addRoleList'>
      <div class="role ">
        <h2 >角色信息修改</h2>
        <!-- <p class="f-fr cancelButton">
          <i class="el-icon-close" style="margin-right:20px;" @click="backRole"></i>
        </p> -->
      </div>
      <div class="rolename">
        <p>
          <label for="">角色名称:</label>
          <el-input  placeholder="请输入内容" v-model="row.roleDesc" disabled></el-input>
        </p>
        <p>
          <label for="" style="display: inline-block;  line-height: 55px;">角色描述:</label>
          <el-input type="textarea"  placeholder="请输入内容" v-model="row.roleDescribe"></el-input> 
        </p>
      </div>
      <div class="infoADD" style="margin-top:30px;">
        <div class="powerSelect">
          <span> <i class="iconfont" style="color:#1296db;margin-right:5px;">&#xe686;</i>所拥有的权限</span>
          <el-tree
            :data="parentlist"
            node-key="id"
            show-checkbox
            ref="tree"
            expand-on-click-node
            :default-expanded-keys="makeArr"
            :props="defaultProps"
             @check="handleCheck">
          </el-tree>
        </div>
      </div>
      <div class="buttonPower">
        <el-popover
          placement="top"
          width="160"
          v-model="visible2">
          <p>确定放弃编辑？</p>
          <div style="text-align: right; margin: 0">
            <el-button plain type="primary" @click="visible2 = false" size="mini">取消</el-button>
            <el-button type="primary" size="mini"  @click="cancelRole">确定</el-button>
          </div>
          <el-button slot="reference" size="small">取消</el-button>
        </el-popover>
        <el-button  @click="makeRoleBtn" type="primary" size="small">修改</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import api from 'js/service'
import regular from 'js/regular'
  export default {
    inject: ['reload'],
    data() {
      return {
        visible2: false,
        ruleForm: {
          roleDesc: '',
          desc: ''
        },
        parId: '',
        childId: '',
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        // parentlist: [],
        flag:'',
        smallFlag:'',
        defaultArr:[],
        makeArr:[],
        childMenuL:[],
        arr:[],
        demo:[],
        pL:[],
        cL:[]
      }
    },
    created() {
      // this.getAllPermisson()
       setTimeout(()=>{
        this.roleTree()
      },500)
     
    },
    props:{
      row:{},
      treeData:{
        type:Array,
        default:[]
      },
      parentlist:{
        type:Array,
        default:[]
      },
    },
    methods: {
      roleTree() {
        for (var i in this.treeData) {
          this.flag=this.treeData[i].flag;
          if (this.treeData[i].userType == 1) {
              this.parId = this.treeData[i].id;
              this.childMenuL=this.treeData[i].childMenu
              if(this.flag=="true"){
                this.makeArr.push(this.parId)
              }
              for (var j in this.childMenuL) {
                this.smallFlag=this.childMenuL[j].flag;
                this.childId=this.childMenuL[j].id
                  if(this.flag == "true" && this.smallFlag=="true" ){
                  this.makeArr.push(this.childId)
                  this.cL.push(this.childId)
              }
            }
          }
        }
        
        this.$refs.tree.setCheckedKeys(this.cL)
      },
      handleCheck(val,data){
       this.makeArr= data.checkedKeys.concat(data.halfCheckedKeys)
        
      },
      cancelRole(){
        this.$emit('closeDialog')
      },
      makeRoleBtn(){
        let parmas={
          resourceId:this.makeArr,
          id:this.row.id,
          roleDesc: this.row.roleDesc,
          roleDescribe:this.row.roleDescribe,
        }
        let success=data=>{
          if(data.code=="OK"){
            this.$message.success('保存成功')
            this.reload()
          }else{
            this.$message.error(data.msg)
          }
        }
        api.roleUpdate(parmas,success)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .contentRoleADD {
    width: 650px;
    right: 0;
    height: 100%;
    position: fixed;
    background: #fff;
    top: 0;
    z-index: 999;
    .addRoleList {
      width: 650px;
      height: 100%;
      .rolename{
        p{
          margin:20px;
          .el-input {
            width: 70%;
          }
        }
        .el-textarea {
          width: 70%;
        }
      }
      .infoADD {
        overflow: auto;
        height: 60%;
        box-sizing: border-box;
        padding-bottom: 60px !important;
        .el-input {
          width: 70%;
        }
        .el-textarea {
          width: 70%;
        }
      }
      .role {
        width: 100%;
        height:60px;
        border-bottom: 1px solid #e8e8e8;
        h2 {
          height: 60px;
          line-height: 60px;
          text-indent: 20px;
          font-size: 20px;
        }
        .cancelButton{
          line-height:60px;
        }
      }
      .powerSelect {
        margin-left: 30px;
        span {
          height: 60px;
          display: block;
          line-height: 60px;
        }
      }
       .buttonPower{
          text-align:right;
          height:80px;
          margin-bottom:8%;
           button{
              margin-right:60px;
              margin-bottom:8%;
           }
        }
    }
  }

</style>
